<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${targerUser.username }的个人资料 - 校园论坛 - 相思湖学院</title>
<link rel="shortcut icon" href="static/image/logo_little.png">
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.css" >
<link rel="stylesheet" type="text/css" href="static/css/cropper.min.css" >
<link rel="stylesheet" type="text/css" href="static/css/page.css" >
<link rel="stylesheet" type="text/css" href="static/css/top.css" >
<link rel="stylesheet" type="text/css" href="static/css/user.css" >

<script type="text/javascript" src="static/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="static/js/cropper.min.js"></script>
<script type="text/javascript" src="static/js/bootstrap.js"></script>
</head>
<body>
	<div class="top">
		<img class="logo" alt="相思湖学院论坛" src="static/image/logo.png">
		<form action="search" method="post" onsubmit="return isEmpty()">
			<input  id="search" name="search" type="text" value="" placeholder="请输入搜索内容">
		    <button type="submit" class="submit">搜索</button>
		</form>
		<script type="text/javascript">
			function isEmpty() {
				if(document.getElementById("search").value == "") {
					$('<div>').appendTo('body').addClass('alert alert-info').html("请输入搜索内容").show().delay(1500).fadeOut();
					return false;
				}
				return true;
			}
		</script>
		<c:if test="${user != null }">
			<div class="user">
				<span><a style="font-weight: 800;color: black;" href="userinfo">${user.username }</a></span>
				<span>|</span>
				<div class="dropdown" style="display: inline-block;">
					<a data-toggle="dropdown" class="dropdown-toggle" href="#">我的<strong class="caret"></strong></a>
					<ul class="dropdown-menu">
						<li><a href="user?id=${user.id }&selected=mytopic">帖子</a></li>
						<!-- <li><a href="#">收藏</a></li>
						<li><a href="#">好友</a></li> -->
					</ul>
				</div>
				<span>|</span>
				<span><a href="userinfo">设置</a></span>
				<!-- <span>|</span>
				<span><a href="#">消息</a></span> -->
				<span>|</span>
				<div class="dropdown" style="display: inline-block;">
					<a data-toggle="dropdown" class="dropdown-toggle" href="#">提醒<strong class="caret"></strong></a>
					<ul class="dropdown-menu">
						<li><a href="notice">消息</a></li>
						<!-- <li><a href="#">新听众</a></li> -->
					</ul>
				</div>
				<span>|</span>
				<span><a href="exit">退出</a></span>
				<c:if test="${user.avatar != null && user.avatar != '' }">
					<img class="avatar" src="${user.avatar }">
				</c:if>
				<c:if test="${user.avatar == null || user.avatar == '' }">
					<img class="avatar" src="static/image/noavatar.jpg">
				</c:if>
			</div>
		</c:if>
		<c:if test="${user == null }">
			<div class="visitor">
				<a href="ps.login">登陆</a>
				<a href="${path }/register.jsp">注册</a>
			</div>
		</c:if>
	</div>
	<div class="contral">
		<div class="title">
			<a href="forum" class="nvhm" title="首页"></a>
			<em></em>
			<a>${targerUser.username }</a>
		</div>
		<div class="hd">
			<ul class="nav nav-tabs">
				<li id="userinfo_li" class="active">
					<a href="javascript:;" onclick="show('userinfo')">个人资料</a>
				</li>
				<li  id="mytopic_li">
					<a href="javascript:;" onclick="show('mytopic')">主题</a>
				</li>
				<!-- <li class="disabled">
					<a href="#">信息</a>
				</li> -->
			</ul>
		</div>
		<script type="text/javascript">
			function show(id) {
				document.getElementById('userinfo_li').className = "";
				document.getElementById('mytopic_li').className = "";
				document.getElementById(id + "_li").className = "active";
				
				document.getElementById('userinfo').style.display = "none";
				document.getElementById('mytopic').style.display = "none";
				document.getElementById(id).style.display = "";
			}
		</script>
		<div class="mn">
			<table style="width: 100%;">
				<tr>
					<td valign="top">
						<div id="userinfo">
							<form action="" style="padding: 20px;">
								<c:if test="${targerUser.avatar != null && targerUser.avatar != '' }">
									<img class="avatar" src="${targerUser.avatar }">
								</c:if>
								<c:if test="${targerUser.avatar == null || targerUser.avatar == '' }">
									<img class="avatar" src="static/image/noavatar.jpg">
								</c:if>
								<strong style="line-height: 55px; margin-left: 10px;">${targerUser.username }</strong>
								<c:if test="${targerUser.id != user.id && user.role > targerUser.role }">
									<c:if test="${targerUser.role == 0 && user.role == 2 }">
										<a href="setAdmin?id=${targerUser.id }&role=1">升为版主</a>
									</c:if>
									<c:if test="${targerUser.role == 1 && user.role == 2 }">
										<a href="setAdmin?id=${targerUser.id }">降为普通用户</a>
									</c:if>
									<span>|</span>
									<div class="dropdown" style="display: inline-block; margin-right: 5px;">
										<a data-toggle="dropdown" class="dropdown-toggle" href="#">封号<strong class="caret"></strong></a>
										<ul class="dropdown-menu">
											<li><a href="ban?id=${targerUser.id }&type=1">一天</a></li>
											<li><a href="ban?id=${targerUser.id }&type=1&time=7">一周</a></li>
											<li><a href="ban?id=${targerUser.id }&type=1&time=30">一个月</a></li>
											<li><a href="ban?id=${targerUser.id }&type=1&time=365">一年</a></li>
											<c:if test="${targerUser.isbanned == 1 }">
												<li><a href="ban?id=${targerUser.id }&type=3">解除封号</a></li>
											</c:if>
										</ul>
									</div>
									<span>|</span>
									<div class="dropdown" style="display: inline-block;">
										<a data-toggle="dropdown" class="dropdown-toggle" href="#">禁言<strong class="caret"></strong></a>
										<ul class="dropdown-menu">
											<li><a href="ban?id=${targerUser.id }&type=2&time=1">一天</a></li>
											<li><a href="ban?id=${targerUser.id }&type=2&time=7">一周</a></li>
											<li><a href="ban?id=${targerUser.id }&type=2&time=30">一个月</a></li>
											<li><a href="ban?id=${targerUser.id }&type=2&time=365">一年</a></li>
											<c:if test="${targerUser.issilenced == 1 }">
												<li><a href="ban?id=${targerUser.id }&type=4">解除禁言</a></li>
											</c:if>
										</ul>
									</div>
								</c:if>
								<p style="color: #999;">
									<span>主题&nbsp;&nbsp;&nbsp;${topicList.size() }&nbsp;&nbsp;&nbsp;</span>
									<span>回帖&nbsp;&nbsp;&nbsp;${replyList.size() }</span><br>
									用户组&nbsp;&nbsp;&nbsp;
									<c:if test="${targerUser.role == 0 }">
										<strong style="text-decoration: underline;">普通用户</strong>
									</c:if>
									<c:if test="${targerUser.role == 1 }">
										<strong style="text-decoration: underline;">版主</strong>
									</c:if>
									<c:if test="${targerUser.role == 2 }">
										<strong style="text-decoration: underline;">总版主</strong>
									</c:if>
									<br> 注册时间&nbsp;&nbsp;&nbsp;${targerUser.registertime }
									<c:if test="${targerUser.isbanned == 1 }">
										<br> 状态&nbsp;&nbsp;&nbsp;${targerUser.begintime } 至 ${targerUser.endtime } 禁止登陆
									</c:if>
									<c:if test="${targerUser.issilenced == 1 }">
										<br> 状态&nbsp;&nbsp;&nbsp;${targerUser.begintime } 至 ${targerUser.endtime } 禁止发言
									</c:if>
								</p>
							</form>
						</div>
						<div id="mytopic" style="display: none;">
							<div class="t_title">
								<div style="width: 70%;">
									<a href="javascript:;" onclick="showReply('topic')" id="topic_a" class="selected" style="padding: 0 5px 0 15px;">
										主题
									</a>
									|
									<a href="javascript:;"  onclick="showReply('reply')" style="padding-left: 5px;" id="reply_a">
										回复
									</a>
								</div>
								<span class="topic_span" style="width: 14%; padding-left: 20px;">时间</span>
								<span class="topic_span">版块</span>
							</div>
							<script type="text/javascript">
								function showReply(id) {
									document.getElementById('topic_a').className = "";
									document.getElementById('reply_a').className = "";
									document.getElementById(id + "_a").className = "selected";
									
									document.getElementById('topic').style.display = "none";
									document.getElementById('reply').style.display = "none";
									document.getElementById(id).style.display = "";
									
									if(id == "topic") {
										$('.topic_span').show();
									}else {
										$('.topic_span').hide();
									}
								}
							</script>
							<div id="topic">
								<c:forEach items="${topicList }" var="t">
									<div class="topics">
										<div class="left">
											<span>
												<a href="ps.topic?id=${t.id }">
													<img style="margin-bottom: 4px; margin-right: 10px;" src="static/image/folder_common.gif">${t.title }
												</a>
											</span>
										</div>
										<div class="right">
											<span>${t.updatetime }</span>
										</div>
										<div class="right">
											<span><a href="block?bid=${t.block.id }">${t.block.name }</a></span>
										</div>
									</div>
								</c:forEach>
								<div class="pagination" style="margin: 20px 0; float: left;">
									<c:if test="${tPage.hasPreviousPage == true }">
										<a href="user?id=${targerUser.id }&selected=mytopic&pageNum=${tPage.prePage}">上一页</a>
									</c:if>
									<c:if test="${tPage.pageNum > 3 }">
										<a href="user?id=${targerUser.id }&selected=mytopic&pageNum=1">1 ...</a>
									</c:if>
									<c:set var="index" value="${tPage.pageNum - (tPage.pageNum == tPage.pages ? 4:(tPage.pageNum == (tPage.pages - 1) ? 3:2))}" />
									<c:forEach var="x" begin="1" end="${tPage.pageNum == tPage.pages ? 4:(tPage.pageNum == (tPage.pages - 1)) ? 3:2 }" step="1"> 
										<c:if test="${index > 0 && index < tPage.pageNum }">
											<a href="user?id=${targerUser.id }&selected=mytopic&pageNum=${index}">${index }</a>
										</c:if>
										<c:set var="index" value="${index + 1}" />
									</c:forEach>
									<c:if test="${tPage.pages != 0 }"><strong>${tPage.pageNum }</strong></c:if>
									<c:set var="index" value="${tPage.pageNum }" />
									<c:forEach var="x" begin="1" end="${tPage.pageNum == 1 ? 4:(tPage.pageNum == 2) ? 3:2 }" varStatus="status" step="1"> 
										<c:set var="index" value="${index + 1}" />
										<c:if test="${index <= tPage.pages }">
											<a href="user?id=${targerUser.id }&selected=mytopic&pageNum=${index}">${index }</a>
										</c:if>
									</c:forEach>
									<c:if test="${tPage.pageNum < (tPage.pages - 2) }">
										<a href="user?id=${targerUser.id }&selected=mytopic&pageNum=${tPage.pages}">... ${tPage.pages }</a>
									</c:if>
									<c:if test="${tPage.pages != 0 }">
										<label>
											<input type="text" title="输入页码，按回车快速跳转" value="${tPage.pageNum }"
												onkeydown="if(event.keyCode==13) {window.location='user?id=${targerUser.id }&selected=mytopic&pageNum='+this.value;}">
											<span>/${tPage.pages }页</span>
										</label>
									</c:if>
									<c:if test="${tPage.hasNextPage == true }">
										<a href="user?id=${targerUser.id }&selected=mytopic&pageNum=${tPage.nextPage }">下一页</a>
									</c:if>
								</div>
							</div>
							<div id="reply" style="display: none;">
								<c:forEach items="${replyList }" var="t">
									<div class="topics">
										<div class="left" style="width: 100%;">
											<span>
												<a href="ps.topic?id=${t.id }">
													<img style="margin-bottom: 4px; margin-right: 10px;" src="static/image/folder_common.gif">${t.title }
												</a>
											</span>
										</div>
										<c:if test="${t.replyList.size() != 0 }">
											<div class="replys">
												<c:forEach items="${t.replyList }" var="r">
													<div class="reply"><a href="ps.topic?id=${r.tid }&rid=${r.id}&createtime=${r.createtime}">${r.content }</a></div>
													<div class="date">
														${r.createtime }
													</div>
												</c:forEach>
											</div>
										</c:if>
									</div>
								</c:forEach>
								<div class="pagination" style="margin: 20px 0; float: left;">
									<c:if test="${rPage.hasPreviousPage == true }">
										<a href="user?id=${targerUser.id }&selected=mytopic&mytopic=reply&rPageNum=${rPage.prePage}">上一页</a>
									</c:if>
									<c:if test="${rPage.pageNum > 3 }">
										<a href="user?id=${targerUser.id }&selected=mytopic&mytopic=reply&rPageNum=1">1 ...</a>
									</c:if>
									<c:set var="index" value="${rPage.pageNum - (rPage.pageNum == rPage.pages ? 4:(rPage.pageNum == (rPage.pages - 1) ? 3:2))}" />
									<c:forEach var="x" begin="1" end="${rPage.pageNum == rPage.pages ? 4:(rPage.pageNum == (rPage.pages - 1)) ? 3:2 }" step="1"> 
										<c:if test="${index > 0 && index < rPage.pageNum }">
											<a href="user?id=${targerUser.id }&selected=mytopic&mytopic=reply&rPageNum=${index}">${index }</a>
										</c:if>
										<c:set var="index" value="${index + 1}" />
									</c:forEach>
									<c:if test="${rPage.pages != 0 }"><strong>${rPage.pageNum }</strong></c:if>
									<c:set var="index" value="${rPage.pageNum }" />
									<c:forEach var="x" begin="1" end="${rPage.pageNum == 1 ? 4:(rPage.pageNum == 2) ? 3:2 }" varStatus="status" step="1"> 
										<c:set var="index" value="${index + 1}" />
										<c:if test="${index <= rPage.pages }">
											<a href="user?id=${targerUser.id }&selected=mytopic&mytopic=reply&rPageNum=${index}">${index }</a>
										</c:if>
									</c:forEach>
									<c:if test="${rPage.pageNum < (rPage.pages - 2) }">
										<a href="user?id=${targerUser.id }&selected=mytopic&mytopic=reply&rPageNum=${rPage.pages}">... ${rPage.pages }</a>
									</c:if>
									<c:if test="${rPage.pages != 0 }">
										<label>
											<input type="text" title="输入页码，按回车快速跳转" value="${rPage.pageNum }"
												onkeydown="if(event.keyCode==13) {window.location='user?id=${targerUser.id }&selected=mytopic&mytopic=reply&rPageNum='+this.value;}">
											<span>/${rPage.pages }页</span>
										</label>
									</c:if>
									<c:if test="${rPage.hasNextPage == true }">
										<a href="user?id=${targerUser.id }&selected=mytopic&mytopic=reply&rPageNum=${rPage.nextPage }">下一页</a>
									</c:if>
								</div>
							</div>
						</div>
					</td>
				</tr>
			</table>
		</div>
	</div>
	
	<div id="msg" class="alert alert-info" style="display: none;"></div>
</body>
<script type="text/javascript">
	var msg = '${msg}';
	if(msg != "") {
		/* $('<div>').appendTo('body').addClass('alert alert-info').html(msg).show().delay(1500).fadeOut(); */
		$('#msg').appendTo('body').html(msg).show().delay(3000).fadeOut();
	}
</script>
<script type="text/javascript">
	var selected = '${selected}';
	var mytopic = '${mytopic}';
	if(selected != "") {
		document.getElementById('userinfo').style.display = "none";
		document.getElementById('mytopic').style.display = "none";
		document.getElementById(selected).style.display = "";
		
		document.getElementById('userinfo_li').className = "";
		document.getElementById('mytopic_li').className = "";
		document.getElementById(selected + "_li").className = "active";
	}
	if(mytopic != "") {
		document.getElementById('topic_a').className = "";
		document.getElementById('reply_a').className = "";
		document.getElementById(mytopic + "_a").className = "selected";
		
		document.getElementById('topic').style.display = "none";
		document.getElementById('reply').style.display = "none";
		document.getElementById(mytopic).style.display = "";
		
		if(mytopic == "topic") {
			$('.topic_span').show();
		}else {
			$('.topic_span').hide();
		}
	}
</script>
</html>